<template>
    <div class="box">
        <el-button type="primary" @click="testData">测试</el-button>
        {{ testArr }}
        <div class="container">
            <el-table style="width:100%" :data="tableData">
                <el-table-column prop="date" label="日期"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
            <ul>
                <li v-for="(value, key) in arr" :key="key" :i="value" v-rz>{{ value }}</li>
            </ul>
        </div>
    </div>


</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import slotTest from './slotTest.vue'
// 列表数据
const tableData: any = ref([]);
const testArr = ref([1, 2, 3, 4]);
onMounted(() => {
    // 定时生成数据
    setTimeout(() => {
        let _arr: any = [];
        for (let i = 0; i < 200; i++) {
            _arr.push({
                name: "王小虎" + i,
                date: new Date().getFullYear(),
                address: "上海市浦东新区"
            })
            tableData.value = _arr;
        }
    }, 1000)
})
// 创建数据
const arr: number[] = [1, 2, 3, 4];
// 点击测试
const testData = () => {
    console.log(testArr.value)
}
// 自定义指令
const vRz = {
    mounted: (el: any) => {
        let index = el.getAttribute("i");
        console.log("focus", index);
        if (index % 2 === 1) {
            el.style.backgroundColor = "yellow";
        }
    }
}
</script>
<style scoped lang="scss">
body,
html {
    width: 100%;
    height: 100vh;
}

.box {
    width: 100%;
    height: 100vh;
    display: flex;

    .container {
        width: 600px;
        height: 600px;
        overflow: auto;
        border: 1px solid black;
        margin: auto;
    }
}
</style>